<template>
	<view class="container">
		<!-- #ifdef APP -->
		<u-navbar style="font-size: 34rpx;font-weight: 500;" title="切换地址" :autoBack="true" :placeholder="true"></u-navbar>
		<!-- #endif -->
		<!-- 顶部区域 -->
		<view class="header">
			<view class="location">
				<view class="location-left">
					<u-icon class="iconclass" name="map-fill" size="16" color="#000000"></u-icon>
					<text class="location-text">当前定位: {{ currentCity }}</text>
				</view>
				<text class="location-right" @click="getCurrentLocation">重新定位</text>
			</view>
			<!-- <view class="hot-cities" v-if="hotCities.length>0">
				<view v-for="city in hotCities" :key="city" class="city-btn">
					{{ city }}
				</view> 
			</view> -->
		</view>
		<!-- 主体区域 -->
		<view class="main">
			<!-- 左侧省份列表 -->
			<scroll-view scroll-y class="province-list">
				<view v-for="(province, index) in columns[0]" :key="index"
					:class="['province-item', { active: areaIndex[0] == index }]" @click="handleProvinceSelect(index)">
					<view class="block" v-if="areaIndex[0] === index"></view>
					{{ province.name }}
				</view>
			</scroll-view>
			<!-- 右侧城市列表 -->
			<scroll-view scroll-y class="city-list">
				<view v-for="(city,index) in columns[1]" :key="index" :class="['city-item', { active: areaIndex[1] == index }]"
					@click="handleCitySelect(city,index)">
					{{ city.name }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				hotCities: ['北京', '上海'],
				longitude: '',
				latitude: '',
				areaData: null,
				currentCity: '',
				areaIndex: [0, 0],
				columns: [
					[],
					[]
				],
				columnData: [
					[],
					[]
				],
			}
		},
		onShow() {
			this.getAreaTree()
		},
		methods: {
			//获取城市信息，并赋值默认值
			getAreaTree() {
				let searchData = uni.getStorageSync('searchData') || {}
				this.currentCity = searchData.city_name

				this.$Api['common'].getAreaTree().then(res => {
					this.areaData = res.data
					this.columnData = this.extractChildNames(res.data)
					let areaIndex = this.findCityIndex(this.currentCity, this.columnData)
					this.areaIndex = areaIndex
					this.getColumnsData()
				})
			},
			getColumnsData() {
				if (Array.isArray(this.areaData) && this.areaData.length > 0 && Array.isArray(this.areaData[0]
						.childlist)) {
					const columns = [
						this.areaData.map(item => {
							return {
								id: item.id,
								name: item.name,
							}
						}),
						this.areaData[this.areaIndex[0]].childlist.map(item => {
							return {
								id: item.id,
								name: item.name,
							}
						})
					];
					this.columns = [...columns];
				} else {
					console.error('Invalid data structure');
					// 或者根据需要设置默认值给 this.columns
					this.columns = [
						[],
						[]
					];
				}
			},
			//根据城市名称查询索引
			findCityIndex(cityName, cities) {
				for (let i = 0; i < cities.length; i++) {
					let row = cities[i];
					for (let j = 0; j < row.length; j++) {
						if (row[j] === cityName) {
							return [i, j]; // 返回行和列的索引
						}
					}
				}
				return null; // 如果没有找到市区，返回null
			},
			//格式化城市信息
			extractChildNames(data) {
				return data.map(item => {
					// 如果 childlist 存在且不为空，则提取所有城市的 name 属性
					if (item.childlist && item.childlist.length > 0) {
						return item.childlist.map(child => child.name);
					} else {
						// 否则返回一个空数组
						return [];
					}
				});
			},
			updateUserInfo() {
				this.$Api['user'].updateUserInfo({
					lng: this.longitude.toString(),
					lat: this.latitude.toString(),
				}).then(res => {
					//保存用户经纬度
				})
			},
			handleProvinceSelect(index) {
				this.$nextTick(() => {
					this.areaIndex = [index, 0]
					// this.columns[1] = this.columnData[index]
					this.getColumnsData()
				})
				// console.log(this.columnData, 9999)
			},
			handleCitySelect(item, index) {
				this.areaIndex[1] = index
				this.$forceUpdate()
				let searchData = uni.getStorageSync('searchData') || {}
				searchData.city_id = item.id
				searchData.city_name = item.name
				uni.setStorageSync('searchData', searchData)
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #ffffff;
	}

	.header {
		padding: 20rpx 40rpx 20rpx 36rpx;
		flex-shrink: 0;
		background-color: #f8f8f8;
	}

	.location {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.location-left {
			display: flex;
			align-items: center;

			.iconclass {
				align-self: first baseline;
			}

			.location-text {
				font-size: 28rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}


		.location-right {
			font-size: 28rpx;
			color: #F169F6;
		}
	}


	.hot-cities {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.city-btn {
		width: 116rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 28rpx;
		border-radius: 40rpx;
		background-color: #e6e6e6;
	}

	.main {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.province-list {
		width: 280rpx;
		height: 77vh;
		background-color: #f8f8f8;
		overflow: auto;

		.province-item {
			padding: 30rpx 20rpx;
			font-size: 26rpx;
			color: #333333;
			text-align: center;
			position: relative;
		}

		.province-item.active {
			background-color: #ffffff;
			position: relative;
			font-size: 30rpx;
			color: #F169F6;
			font-weight: bold;
		}

		.province-item .block {
			position: absolute;
			width: 5rpx;
			height: 40rpx;
			background: #F169F6;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.city-list {
		flex: 1;
		overflow: auto;
		padding: 0 30rpx;
		height: 77vh;

		.city-item {
			padding: 30rpx 120rpx;
			font-size: 26rpx;
			color: #47474C;
		}

		.city-item.active {
			font-size: 30rpx;
			color: #F169F6;
			font-weight: bold;
		}
	}
</style>